<template>
    <div class="order">
      <!-- 导航栏开始 -->
      <van-nav-bar
        title="订单"
        left-arrow
        @click-left="onClickLeft"
      />
      <!-- 导航栏结束 -->
      <!-- 订单信息开始 -->
        <van-tabs class="van" v-model="active" color="#bf73ff" @change="findHandle">
          <van-tab title=" 全部订单" ></van-tab>
          <van-tab title="待派单"></van-tab>
          <van-tab title="待接单"></van-tab>
          <van-tab title="待确认"></van-tab>
          <van-tab title="已完成"></van-tab>
        </van-tabs>
      <!-- 订单信息结束 -->
      <!-- 内容开始 -->
      <div class="vat">
        <div class="wrapper" v-for="item in orders" :key="item.id">
              <div class="yuan">
                <img width="100%" height="100%" :src="item.customer.userFace" alt="">
              </div>
              <div class="username">
                <div class="name">{{item.customer.username}}</div>
                <div class="address">{{item.address.province}}{{item.address.city}}{{item.address.area}}{{item.address.address}}</div>
                <div class="data">{{item.orderTime | fmtTime}}
                </div>
              </div>
              <div class="price">
                <div class="ststus">{{item.status}}</div>
                <div class="pri">￥{{item.total}}</div>
              </div>
            </div>
      </div>
          
          <!-- 内容结束 -->
    </div>
</template>
<script>
import {get} from '@/http/axios.js'
export default {
    data(){
        return{
          list:{
              page:1,
              pageSize:10
          },
         orders:[],
         active:0
        }
    },
    methods:{
    // 查询所有订单信息
    findAllOrder(){
     get('/order/pageQuery',this.list).then(res=>{
        //  console.log(res.data.data.list);
        this.orders = res.data.data.list
     })
    },
    onClickLeft(){
      this.$router.push({path:'/manager/home'})
    },
    findHandle(name,title){
   console.log(name,title);
   this.list.status = title
   if(title == '全部订单'){
  delete this.list.status
   }
   this.findAllOrder()
    }
    },
    created(){
      this.findAllOrder()
    }
}
</script>
<style scoped>
.order .vat{
  padding-bottom: 65px;
  width: 100%;
}
.order .vat  .wrapper{
  height: 100px;
  width: 93%;
  margin:0 auto;
  box-shadow: 0 0 6px 0 #ccc;
  margin-top: 20px;
  padding: 26px 0px;
}
.order .vat .wrapper .yuan{
width: 80px;
height: 80px;
border-radius: 50%;
float: left;
}
.order .vat .wrapper .yuan img{
  border-radius: 50%;
}
.order .vat .wrapper .username{
  float: left;
  width: 55%;
  height: 80px;
}
.order .vat .wrapper .username .address{
  color: #666;
  margin-top: 1.5em;
  font-size: 12px;
}
.order .vat .wrapper .username .data{
  margin-top: 1.5em;

}
.order .vat .wrapper .price{
  float: right;
  width: 24%;
  height: 80px;
}
.order .vat .wrapper .price .ststus{
  color: #f8825d;
  font-size: 14px;
}
.order .vat .wrapper .price .pri{
  margin-top: 56px;
}
</style>
